<template>
  <Menubar :model="items" class="mb-3">
    <template #start>
      <div class="flex align-items-center">
        <h2 class="m-0 text-primary font-bold">{{ title }}</h2>
      </div>
    </template>
    <template #end>
      <div v-if="authStore.token" class="flex align-items-center">
        <span class="mr-2">{{ authStore.user?.username }}</span>
        <Button icon="pi pi-sign-out" class="p-button-text p-button-rounded" @click="logout" tooltip="退出登录" />
      </div>
      <div v-else class="flex align-items-center">
        <Button label="登录" class="p-button-text mr-2" @click="navigateTo('/auth/login')" />
        <Button label="注册" class="p-button-outlined" @click="navigateTo('/auth/register')" />
      </div>
    </template>
  </Menubar>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '../services/auth';
import Menubar from 'primevue/menubar';
import Button from 'primevue/button';

const props = defineProps({
  title: {
    type: String,
    default: 'MVP 快速原型'
  }
});

const router = useRouter();
const authStore = useAuthStore();

// 导航菜单项
const items = computed(() => {
  const menuItems = [
    {
      label: '首页',
      icon: 'pi pi-home',
      command: () => router.push('/')
    },
    {
      label: '关于',
      icon: 'pi pi-info-circle',
      command: () => router.push('/about')
    }
  ];
  
  // 根据认证状态添加更多菜单项
  if (authStore.token) {
    menuItems.push({
      label: '用户管理',
      icon: 'pi pi-users',
      command: () => router.push('/users')
    });
  }
  
  return menuItems;
});

// 导航方法
const navigateTo = (path: string) => {
  router.push(path);
};

// 登出方法
const logout = () => {
  authStore.logout();
  router.push('/auth/login');
};
</script>